<template>
  <div class="ai-video-page">
    <!-- 侧边栏 -->
    <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
      <div class="sidebar-header">
        <button @click="toggleSidebar" class="sidebar-toggle">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M3 12h18m-9-9l9 9-9 9"/>
          </svg>
        </button>
        <h2 v-if="!sidebarCollapsed" class="sidebar-title">AI视频助手</h2>
      </div>

      <div v-if="!sidebarCollapsed" class="sidebar-content">
        <button @click="createNewVideo" class="new-video-button">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 5v14m-7-7h14"/>
          </svg>
          新建视频
        </button>

        <!-- 搜索框 -->
        <div class="search-box">
          <input 
            type="text" 
            v-model="searchQuery" 
            placeholder="搜索视频任务..." 
            class="search-input"
            @input="filterTasks"
          />
        </div>

        <!-- 视频任务历史 -->
        <div class="video-history">
          <div class="history-header">
            <h3 class="history-title">视频任务</h3>
            <div class="history-actions">
              <button @click="toggleSortOrder" class="sort-button" title="排序">
                {{ sortOrder === 'desc' ? '↓' : '↑' }}
              </button>
            </div>
          </div>
          <div class="history-list" ref="historyList">
            <div
              v-for="task in displayedTasks"
              :key="task.task_id"
              :class="['history-item', { active: task.task_id === currentTaskId, favorite: task.is_favorite }]"
              @click="loadTask(task.task_id)"
            >
              <div class="history-content">
                <div class="history-title-text">
                  <span v-if="task.is_favorite" class="favorite-star">★</span>
                  {{ truncateText(task.prompt, 30) }}
                </div>
                <div class="history-preview">{{ task.resolution }} - {{ task.duration }}秒</div>
                <div class="history-time">{{ formatDate(task.create_time) }}</div>
                <div class="history-status">
                  <span :class="['status-badge', task.status]">
                    {{ getStatusText(task.status) }}
                  </span>
                </div>
              </div>
              <div class="history-item-actions">
                <button @click.stop="toggleFavorite(task)" class="favorite-button" :class="{ favorited: task.is_favorite }">
                  {{ task.is_favorite ? '★' : '☆' }}
                </button>
                <button @click.stop="deleteTask(task.task_id)" class="delete-button">×</button>
              </div>
            </div>
            <div v-if="displayedTasks.length === 0" class="no-tasks">
              暂无任务
            </div>
          </div>
        </div>
      </div>
    </aside>

    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 对话区域 -->
      <div class="chat-area" ref="chatContainer">
        <!-- 欢迎界面 -->
        <div v-if="!currentTaskId && !generatedResult && displayedTasks.length === 0" class="welcome-screen">
          <div class="welcome-content">
            <div class="ai-avatar">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <path d="M23 7l-7 5 7 5V7z"/>
                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
              </svg>
            </div>
            <h1 class="welcome-title">AI视频助手</h1>
            <p class="welcome-subtitle">智能视频生成</p>
            <div class="welcome-features">
              <div class="feature-item">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M23 7l-7 5 7 5V7z"/>
                  <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                </svg>
                <span>AI视频生成</span>
              </div>
              <div class="feature-item">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
                  <line x1="8" y1="21" x2="16" y2="21"/>
                  <line x1="12" y1="17" x2="12" y2="21"/>
                </svg>
                <span>多种分辨率</span>
              </div>
              <div class="feature-item">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <circle cx="12" cy="12" r="10"/>
                  <polyline points="12,6 12,12 16,14"/>
                </svg>
                <span>自定义时长</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 对话消息列表 -->
        <div v-else class="messages-container" ref="messagesContainer">
          <!-- 历史对话 -->
          <div v-if="currentTaskId && currentTask" class="message-group">
            <div class="message user-message">
              <div class="message-avatar user-avatar">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                  <circle cx="12" cy="7" r="4"/>
                </svg>
              </div>
              <div class="message-content">
                <div class="message-text">{{ currentTask.prompt }}</div>
                <div class="message-time">{{ formatRelativeTime(currentTask.create_time) }}</div>
              </div>
            </div>
            
            <div class="message ai-message">
              <div class="message-avatar ai-avatar">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M23 7l-7 5 7 5V7z"/>
                  <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                </svg>
              </div>
              <div class="message-content">
                <div class="video-task-info">
                  <div class="task-params">
                    <span class="param-item">📐 {{ currentTask.resolution }}</span>
                    <span class="param-item">📏 {{ currentTask.aspect_ratio }}</span>
                    <span class="param-item">⏱️ {{ currentTask.duration }}秒</span>
                    <span class="param-item">💰 ¥{{ currentTask.price }}</span>
                  </div>
                  
                  <div class="task-status-info">
                    <span class="status-label">状态:</span>
                    <span :class="['status-badge', currentTask.status]">
                      {{ getStatusText(currentTask.status) }}
                    </span>
                  </div>
                  
                  <div v-if="currentTask.video_url" class="video-preview">
                    <video controls width="100%" class="generated-video">
                      <source :src="currentTask.video_url" type="video/mp4">
                      您的浏览器不支持视频播放。
                    </video>
                  </div>
                  
                  <div v-if="currentTask.error_msg" class="error-message">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <circle cx="12" cy="12" r="10"/>
                      <line x1="15" y1="9" x2="9" y2="15"/>
                      <line x1="9" y1="9" x2="15" y2="15"/>
                    </svg>
                    {{ currentTask.error_msg }}
                  </div>
                </div>
                
                <div class="message-actions">
                  <button v-if="currentTask.video_url" @click="downloadVideo(currentTask.video_url)" class="action-btn">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                      <polyline points="7,10 12,15 17,10"/>
                      <line x1="12" y1="15" x2="12" y2="3"/>
                    </svg>
                    下载
                  </button>
                  <button @click="copyText(currentTask.prompt)" class="action-btn">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                    </svg>
                    复制提示词
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 当前生成的对话 -->
          <div v-else-if="generatedResult" class="message-group">
            <div class="message user-message">
              <div class="message-avatar user-avatar">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                  <circle cx="12" cy="7" r="4"/>
                </svg>
              </div>
              <div class="message-content">
                <div class="message-text">{{ generateForm.prompt }}</div>
                <div class="message-time">刚刚</div>
              </div>
            </div>
            
            <div class="message ai-message">
              <div class="message-avatar ai-avatar">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M23 7l-7 5 7 5V7z"/>
                  <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                </svg>
              </div>
              <div class="message-content">
                <div class="video-task-info">
                  <div class="task-params">
                    <span class="param-item">📐 {{ generatedResult.resolution }}</span>
                    <span class="param-item">📏 {{ generatedResult.aspect_ratio }}</span>
                    <span class="param-item">⏱️ {{ generatedResult.duration }}秒</span>
                    <span class="param-item">💰 ¥{{ generatedResult.price }}</span>
                  </div>
                  
                  <div class="task-status-info">
                    <span class="status-label">状态:</span>
                    <span :class="['status-badge', generatedResult.status]">
                      {{ getStatusText(generatedResult.status) }}
                    </span>
                  </div>
                  
                  <div v-if="generatedResult.video_url" class="video-preview">
                    <video controls width="100%" class="generated-video">
                      <source :src="generatedResult.video_url" type="video/mp4">
                      您的浏览器不支持视频播放。
                    </video>
                  </div>
                  
                  <div v-if="generatedResult.error_msg" class="error-message">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <circle cx="12" cy="12" r="10"/>
                      <line x1="15" y1="9" x2="9" y2="15"/>
                      <line x1="9" y1="9" x2="15" y2="15"/>
                    </svg>
                    {{ generatedResult.error_msg }}
                  </div>
                </div>
                
                <div class="message-actions">
                  <button v-if="generatedResult.video_url" @click="downloadVideo(generatedResult.video_url)" class="action-btn">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                      <polyline points="7,10 12,15 17,10"/>
                      <line x1="12" y1="15" x2="12" y2="3"/>
                    </svg>
                    下载
                  </button>
                  <button @click="startTaskPolling(generatedResult.task_id)" class="action-btn">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M1 4v6h6"/>
                      <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
                    </svg>
                    刷新状态
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 生成中的状态 -->
          <div v-if="generating" class="message ai-message generating">
            <div class="message-avatar ai-avatar">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M23 7l-7 5 7 5V7z"/>
                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
              </svg>
            </div>
            <div class="message-content">
              <div class="typing-indicator">
                <span></span>
                <span></span>
                <span></span>
              </div>
              <div class="generating-text">正在生成视频...</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="input-area">
        <!-- 设置面板 -->
        <div class="settings-panel" :class="{ expanded: showSettings }">
          <div class="settings-row">
            <div class="setting-group">
              <label>分辨率</label>
              <select v-model="generateForm.resolution">
                <option value="480p">480p</option>
                <option value="720p">720p</option>
                <option value="1080p">1080p</option>
              </select>
            </div>
            <div class="setting-group">
              <label>宽高比</label>
              <select v-model="generateForm.aspect_ratio">
                <option value="16:9">16:9</option>
                <option value="9:16">9:16</option>
                <option value="1:1">1:1</option>
                <option value="4:3">4:3</option>
                <option value="21:9">21:9</option>
              </select>
            </div>
            <div class="setting-group">
              <label>时长</label>
              <select v-model="generateForm.duration">
                <option value="3">3秒</option>
                <option value="5">5秒</option>
                <option value="6">6秒</option>
                <option value="9">9秒</option>
                <option value="10">10秒</option>
                <option value="12">12秒</option>
              </select>
            </div>
          </div>
        </div>

        <!-- 输入框区域 -->
        <div class="input-container">
          <button @click="showSettings = !showSettings" class="settings-toggle" :class="{ active: showSettings }">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="3"/>
              <path d="M12 1v6m0 6v6m11-7h-6m-6 0H1"/>
            </svg>
          </button>
          
          <form @submit.prevent="generateVideo" class="input-form">
            <div class="input-wrapper">
              <textarea 
                v-model="generateForm.prompt"
                placeholder="描述你想要的视频内容..."
                rows="1"
                ref="textInput"
                @keydown="handleKeyDown"
                @input="adjustTextareaHeight"
                class="chat-input"
                :disabled="generating"
              ></textarea>
              <button type="submit" :disabled="!generateForm.prompt.trim() || generating" class="send-button">
                <svg v-if="!generating" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <line x1="22" y1="2" x2="11" y2="13"/>
                  <polygon points="22,2 15,22 11,13 2,9 22,2"/>
                </svg>
                <div v-else class="loading-spinner"></div>
              </button>
            </div>
            <div class="input-footer">
              <span class="char-count">{{ generateForm.prompt.length }}/200</span>
              <span class="input-hint">按 Enter 发送，Shift + Enter 换行</span>
            </div>
          </form>
        </div>
      </div>
    </main>
  </div>
</template>


<script>
import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue'
import { generate, tasks } from '@/api/video'

export default {
  name: 'Video',
  setup() {
    // 侧边栏相关状态
    const sidebarCollapsed = ref(false)
    const currentTaskId = ref(null)
    
    // 响应式数据
    const loading = ref(false)
    const generating = ref(false)
    const generatedResult = ref(null)
    const taskList = ref([])
    const currentPage = ref(1)
    const totalPages = ref(1)
    const pageSize = 10
    const pollingInterval = ref(null)
    const currentTask = ref(null) // 新增：用于存储当前选中的任务详情
    
    // 新增功能相关
    const searchQuery = ref('')
    const sortOrder = ref('desc') // 'asc' or 'desc'
    const showScrollToBottom = ref(false)
    const conversationContent = ref(null)
    const showSettings = ref(false)
    const textInput = ref(null)
    const chatContainer = ref(null)
    const messagesContainer = ref(null)
    
    // 生成表单
    const generateForm = reactive({
      prompt: '',
      resolution: '480p',
      aspect_ratio: '21:9',
      duration: 5
    })
    
    // 计算属性
    const isModuleOnline = computed(() => {
      return true // 假设模块始终在线
    })
    
    const currentTaskTitle = computed(() => {
      if (currentTaskId.value) {
        const task = taskList.value.find(t => t.task_id === currentTaskId.value)
        return task ? truncateText(task.prompt, 30) : '视频任务'
      }
      return '新视频任务'
    })
    
    const displayedTasks = computed(() => {
      let filtered = taskList.value
      
      // 应用搜索过滤
      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        filtered = filtered.filter(task => 
          (task.prompt && task.prompt.toLowerCase().includes(query)) ||
          (task.resolution && task.resolution.toLowerCase().includes(query)) ||
          (task.duration && task.duration.toString().includes(query))
        )
      }
      
      // 应用排序
      return [...filtered].sort((a, b) => {
        const dateA = new Date(a.create_time)
        const dateB = new Date(b.create_time)
        return sortOrder.value === 'desc' ? dateB - dateA : dateA - dateB
      })
    })
    
    // 方法
    const toggleSidebar = () => {
      sidebarCollapsed.value = !sidebarCollapsed.value
    }
    
    const createNewVideo = () => {
      currentTaskId.value = null
      currentTask.value = null // 清空当前任务详情
      clearForm()
    }
    
    const loadTask = async (taskId) => {
      currentTaskId.value = taskId
      // 加载具体的任务内容到表单中
      const task = taskList.value.find(t => t.task_id === taskId)
      if (task) {
        generateForm.prompt = task.prompt
        generateForm.resolution = task.resolution
        generateForm.aspect_ratio = task.aspect_ratio
        generateForm.duration = task.duration
      }
      
      // 获取任务详情用于对话显示
      try {
        const result = await tasks.queryStatus(taskId)
        if (result.code === 200) {
          currentTask.value = result.data
          // 滚动到对话区域底部
          await nextTick()
          scrollToBottom()
        }
      } catch (error) {
        console.error('获取任务详情失败:', error)
      }
    }
    
    // 生成视频
    const generateVideo = async () => {
      if (!generateForm.prompt.trim()) {
        alert('请输入提示词')
        return
      }
      
      if (generateForm.prompt.length > 200) {
        alert('提示词长度不能超过200字符')
        return
      }
      
      try {
        generating.value = true
        currentTask.value = null // 清空当前任务详情
        console.log('开始调用视频生成API:', generateForm)
        const result = await generate.create({
          prompt: generateForm.prompt,
          resolution: generateForm.resolution,
          aspect_ratio: generateForm.aspect_ratio,
          duration: generateForm.duration
        })
        console.log('视频生成API响应:', result)
        
        if (result.code === 200) {
          generatedResult.value = result.data
          alert('视频任务创建成功！')
          startTaskPolling(result.data.task_id)
          // 滚动到对话区域底部
          await nextTick()
          scrollToBottom()
        } else {
          alert('创建失败：' + result.msg)
        }
      } catch (error) {
        console.error('创建错误:', error)
        alert('创建失败，请稍后重试')
      } finally {
        generating.value = false
      }
    }
    
    // 清除生成结果
    const clearResult = () => {
      generatedResult.value = null
    }
    
    // 清空表单
    const clearForm = () => {
      generateForm.prompt = ''
      generateForm.resolution = '480p'
      generateForm.aspect_ratio = '21:9'
      generateForm.duration = 5
      generatedResult.value = null
    }
    
    // 开始轮询任务状态
    const startTaskPolling = (taskId) => {
      // 先清除已有的轮询
      if (pollingInterval.value) {
        clearInterval(pollingInterval.value)
      }
      
      // 每5秒查询一次状态
      pollingInterval.value = setInterval(() => {
        queryTaskStatus(taskId)
      }, 5000)
    }
    
    // 查询任务状态
    const queryTaskStatus = async (taskId) => {
      try {
        console.log('查询任务状态，任务ID:', taskId)
        const result = await tasks.queryStatus(taskId)
        console.log('任务状态API响应:', result)
        
        if (result.code === 200) {
          // 如果任务已完成或失败，停止轮询
          if (result.data.status === 'succeeded' || result.data.status === 'failed') {
            if (pollingInterval.value) {
              clearInterval(pollingInterval.value)
              pollingInterval.value = null
            }
          }
          
          // 如果是当前生成的任务，更新生成结果
          if (generatedResult.value && generatedResult.value.task_id === taskId) {
            generatedResult.value = result.data
          }
          
          // 更新任务列表中的状态
          const taskIndex = taskList.value.findIndex(task => task.task_id === taskId)
          if (taskIndex !== -1) {
            taskList.value[taskIndex] = result.data
          }
          
          // 如果是当前选中的任务，更新任务详情
          if (currentTask.value && currentTask.value.task_id === taskId) {
            currentTask.value = result.data
          }
        }
      } catch (error) {
        console.error('查询状态失败:', error)
      }
    }
    
    // 加载任务列表
    const loadTasks = async () => {
      try {
        loading.value = true
        console.log('开始加载视频任务列表，参数:', {
          page: currentPage.value,
          page_size: pageSize
        })
        const result = await tasks.getList({
          page: currentPage.value,
          page_size: pageSize
        })
        console.log('视频任务列表API响应:', result)
        
        if (result.code === 200) {
          taskList.value = result.data.tasks || []
          totalPages.value = result.data.total_pages || 1
        }
      } catch (error) {
        console.error('加载失败:', error)
      } finally {
        loading.value = false
      }
    }
    
    // 刷新任务
    const refreshTasks = () => {
      loadTasks()
    }
    
    // 删除任务
    const deleteTask = async (taskId) => {
      if (!confirm('确定要删除这个任务吗？')) return
      
      try {
        console.log('删除任务，任务ID:', taskId)
        const result = await tasks.delete(taskId)
        console.log('删除任务API响应:', result)
        if (result.code === 200) {
          alert('删除成功')
          loadTasks()
          // 如果删除的是当前查看的任务，清空当前任务ID
          if (currentTaskId.value === taskId) {
            currentTaskId.value = null
            currentTask.value = null
          }
        } else {
          alert('删除失败：' + result.msg)
        }
      } catch (error) {
        alert('删除失败')
      }
    }
    
    // 分页
    const changePage = (page) => {
      currentPage.value = page
      loadTasks()
    }
    
    // 工具函数
    const truncateText = (text, maxLength) => {
      if (!text) return ''
      return text.length > maxLength ? text.slice(0, maxLength) + '...' : text
    }
    
    const getStatusText = (status) => {
      const statusMap = {
        'queued': '排队中',
        'running': '运行中',
        'succeeded': '成功',
        'failed': '失败'
      }
      return statusMap[status] || status
    }
    
    const formatDate = (dateString) => {
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN')
    }
    
    // 新增功能函数
    const filterTasks = () => {
      // 过滤逻辑在computed属性中实现
    }
    
    const toggleSortOrder = () => {
      sortOrder.value = sortOrder.value === 'desc' ? 'asc' : 'desc'
    }
    
    const scrollToBottom = () => {
      if (conversationContent.value) {
        conversationContent.value.scrollTop = conversationContent.value.scrollHeight
      }
    }
    
    const copyPrompt = () => {
      let prompt = ''
      if (currentTask.value) {
        prompt = currentTask.value.prompt
      } else if (generateForm.prompt) {
        prompt = generateForm.prompt
      }
      
      if (prompt) {
        navigator.clipboard.writeText(prompt).then(() => {
          alert('提示词已复制到剪贴板')
        }).catch(err => {
          console.error('复制失败:', err)
          alert('复制失败')
        })
      }
    }
    
    const insertTemplate = () => {
      // 这里可以实现插入模板的功能
      const templates = [
        "请生成一个{描述}的视频，风格为{风格}，时长{时长}秒",
        "创建一个关于{主题}的{风格}视频，要求包含{要素1}和{要素2}",
        "制作一个{类型}视频，内容是{描述}，时长{时长}秒"
      ]
      
      const template = templates[Math.floor(Math.random() * templates.length)]
      generateForm.prompt = template
    }
    
    const toggleFavorite = async (task) => {
      // 这里可以实现收藏功能，需要后端支持
      alert('收藏功能需要后端支持')
    }
    
    // 新增AI对话相关方法
    const copyText = async (text) => {
      try {
        await navigator.clipboard.writeText(text)
        // 这里可以添加成功提示
      } catch (err) {
        console.error('复制失败:', err)
      }
    }
    
    const formatRelativeTime = (dateString) => {
      const date = new Date(dateString)
      const now = new Date()
      const diff = now - date
      
      const minutes = Math.floor(diff / 60000)
      const hours = Math.floor(diff / 3600000)
      const days = Math.floor(diff / 86400000)
      
      if (minutes < 1) return '刚刚'
      if (minutes < 60) return `${minutes}分钟前`
      if (hours < 24) return `${hours}小时前`
      if (days < 7) return `${days}天前`
      return formatDate(dateString)
    }
    
    const handleKeyDown = (event) => {
      if (event.key === 'Enter' && !event.shiftKey) {
        event.preventDefault()
        if (generateForm.prompt.trim() && !generating.value) {
          generateVideo()
        }
      }
    }
    
    const adjustTextareaHeight = () => {
      const textarea = textInput.value
      if (textarea) {
        textarea.style.height = 'auto'
        textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px'
      }
    }
    
    const downloadVideo = (videoUrl) => {
      const link = document.createElement('a')
      link.href = videoUrl
      link.download = `video_${Date.now()}.mp4`
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
    
    // 监听滚动事件
    const handleScroll = () => {
      if (conversationContent.value) {
        const { scrollTop, scrollHeight, clientHeight } = conversationContent.value
        showScrollToBottom.value = scrollHeight - scrollTop - clientHeight > 100
      }
    }
    
    // 组件挂载时加载数据
    onMounted(() => {
      loadTasks()
      
      // 添加滚动事件监听器
      if (conversationContent.value) {
        conversationContent.value.addEventListener('scroll', handleScroll)
      }
    })
    
    // 监听taskList变化，滚动到底部
    watch(taskList, () => {
      nextTick(() => {
        scrollToBottom()
      })
    })
    
    // 组件卸载时清除轮询
    // 注意：在Vue 3的组合式API中，需要使用onUnmounted钩子
    // 这里为了简化没有添加，实际项目中应该添加
    
    return {
      sidebarCollapsed,
      currentTaskId,
      loading,
      generating,
      generatedResult,
      taskList,
      currentPage,
      totalPages,
      generateForm,
      isModuleOnline,
      currentTaskTitle,
      currentTask,
      toggleSidebar,
      createNewVideo,
      loadTask,
      generateVideo,
      clearResult,
      clearForm,
      queryTaskStatus,
      loadTasks,
      refreshTasks,
      deleteTask,
      changePage,
      truncateText,
      getStatusText,
      formatDate,
      startTaskPolling,
      // 新增返回值
      searchQuery,
      sortOrder,
      displayedTasks,
      showScrollToBottom,
      conversationContent,
      showSettings,
      textInput,
      chatContainer,
      messagesContainer,
      filterTasks,
      toggleSortOrder,
      scrollToBottom,
      copyPrompt,
      insertTemplate,
      toggleFavorite,
      copyText,
      formatRelativeTime,
      handleKeyDown,
      adjustTextareaHeight,
      downloadVideo
    }
  }
}
</script>

<style scoped>
.video-page {
  display: flex;
  height: 100vh;
  background: linear-gradient(135deg, #FAF8F5 0%, #f5f3f0 50%, #F0EDE8 100%);
  position: relative;
}

.video-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(250, 234, 218, 0.1) 0%, transparent 25%),
    radial-gradient(circle at 75% 75%, rgba(163, 196, 188, 0.1) 0%, transparent 25%);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* 侧边栏样式 */
.sidebar {
  width: 300px;
  background: rgba(255, 255, 255, 0.95);
  border-right: 1px solid #A3C4BC;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(20px);
  box-shadow: 2px 0 20px rgba(139, 115, 85, 0.08);
  z-index: 1;
  position: relative;
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(163, 196, 188, 0.02) 0%, rgba(139, 115, 85, 0.02) 100%);
  pointer-events: none;
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid rgba(163, 196, 188, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(139, 115, 85, 0.05), rgba(163, 196, 188, 0.05));
}

.sidebar-toggle {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #6b7280;
}

.sidebar-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #8B7355;
}

.sidebar-content {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.new-video-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #8B7355 0%, #A3826B 50%, #8B7355 100%);
  color: white;
  border: none;
  border-radius: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 20px rgba(139, 115, 85, 0.25);
  position: relative;
  overflow: hidden;
}

.new-video-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s;
}

.new-video-button:hover::before {
  left: 100%;
}

.new-video-button:hover {
  background: linear-gradient(135deg, #A3826B 0%, #8B7355 50%, #A3826B 100%);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(139, 115, 85, 0.35);
}

.new-video-button:active {
  transform: translateY(-1px) scale(0.98);
}

.video-history {
  flex: 1;
  overflow: hidden;
}

.history-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.history-list {
  max-height: 100%;
  overflow-y: auto;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 14px;
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.history-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(163, 196, 188, 0.1), transparent);
  transition: left 0.5s;
}

.history-item:hover::before {
  left: 100%;
}

.history-item:hover {
  background: rgba(163, 196, 188, 0.12);
  transform: translateX(6px) scale(1.02);
  border-color: rgba(163, 196, 188, 0.3);
  box-shadow: 0 4px 12px rgba(163, 196, 188, 0.15);
}

.history-item.active {
  background: linear-gradient(135deg, rgba(163, 196, 188, 0.18), rgba(139, 115, 85, 0.08));
  border-left: 4px solid #8B7355;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 4px 15px rgba(139, 115, 85, 0.2);
}

.history-content {
  flex: 1;
  min-width: 0;
}

.history-title-text {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-preview {
  font-size: 12px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}

.history-time {
  font-size: 11px;
  color: #9ca3af;
}

.delete-button {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.history-item:hover .delete-button {
  opacity: 1;
}

/* 主内容区域样式 */
.video-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  z-index: 1;
  overflow-y: auto;
}

.video-header {
  padding: 16px 24px;
  border-bottom: 1px solid rgba(163, 196, 188, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(139, 115, 85, 0.05), rgba(163, 196, 188, 0.05));
}

.video-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #8B7355;
}

.module-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.module-badge {
  background: rgba(163, 196, 188, 0.2);
  color: #8B7355;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(163, 196, 188, 0.3);
}

.module-status {
  font-size: 12px;
  color: #ef4444;
}

.module-status.online {
  color: #10b981;
}

.video-actions {
  display: flex;
  gap: 8px;
}

.action-button {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #A3C4BC;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #8B7355;
}

.action-button:hover {
  background: rgba(163, 196, 188, 0.1);
  transform: translateY(-1px);
}

/* 对话区域样式 */
.conversation-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  padding: 24px;
  margin: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(163, 196, 188, 0.3);
  min-height: 300px;
  max-height: calc(100vh - 400px);
  overflow-y: auto;
}

.conversation-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chat-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.message {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  max-width: 800px;
}

.user-message {
  flex-direction: row-reverse;
  margin-left: auto;
}



.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-avatar {
  background: linear-gradient(135deg, #8B7355, #A3826B);
  color: white;
  font-size: 14px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2极速下载中...px 8px rgba(139, 115, 85, 0.3);
}

.ai-avatar {
  background: linear-gradient(135deg, rgba(163, 196, 188, 0.2), rgba(139, 115, 85, 0.1));
  font-size: 14px;
  border: 2px solid rgba(163极速下载中..., 196, 188, 0.3);
  backdrop-filter: blur(10px);
}

.message-content {
  flex: 1;
  min-width: 0;
}

.user-message .message-content {
  text-align: right;
}

.message-text {
  background: rgba(249, 250, 251, 0.9);
  padding: 16px 20px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
  border: 1px solid rgba(163, 196, 188, 0.2);
  backdrop-filter: blur(10px);
  white-space: pre-wrap;
  word-break: break-word;
}

.user-message .message-text {
  background: linear-gradient(135deg, #8B7355, #A3826B);
  color: white;
  border: none;
  box-shadow: 0 2px 8px rgba(139, 115, 85, 0.3);
}

.message-time {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 8px;
}

.message-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.message:hover .message-actions {
  opacity: 1;
}

.message-actions .action-btn {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 12极速下载中...px;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(10px);
}

.message-actions .action-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5极速下载中...db;
  color: #8B7355;
}

/* 生成中状态 */
.message.generating {
  opacity: 0.8;
}

.typing-indicator {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 16px 20px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: #A3C4BC;
  border-radius: 50%;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  极速下载中...30% {
    transform: translateY(-10px);
  }
}

.generating-text {
  font-size: 14px;
  color: #6b7280;
  margin-top: 8px;
}

/* 输入区域样式 */
.input-section {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  padding: 24px;
  margin: 0 24px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(163, 196, 188, 0.3);
}

.section-header {
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.section-header h2 {
  font-size: 1.5rem;
  color: #8B7355;
  margin: 0;
  font-weight: 600;
}

.section-header p {
  color: #6b7280;
  margin: 4px 0 0 0;
  font-size: 0.9rem;
}

.generate-form {
  max-width: 800px;
}

.form-controls {
  background: rgba(245, 245, 245, 0.8);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(163, 196, 188, 0.3);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #374151;
}

.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(163, 196, 188, 0.5);
  border-radius: 12px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #8B7355;
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.char-count {
  text-align: right;
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
}

.form-actions {
  text-align: center;
  margin-top: 20px;
}

.generate-btn {
  background: linear-gradient(135deg, #8B7355 0%, #A3826B 50%, #8B7355 100%);
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 20px rgba(139, 115, 85, 0.3);
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.generate-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s;
}

.generate-btn:hover::before {
  left: 100%;
}

.generate-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #A3826B 0%, #8B7355 50%, #A3826B 100%);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 30px rgba(139, 115, 85, 0.4);
}

.generate-btn:active:not(:disabled) {
  transform: translateY(-1px) scale(0.98);
}

.generate-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
}

.generate-btn:disabled::before {
  display: none;
}

.task-info, .result-info {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.info-item {
  background: rgba(163, 196, 188, 0.15);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  color: #8B7355;
  border: 1px solid rgba(163, 196, 188, 0.3);
}

.task-status, .status-badge {
  margin-bottom: 20px;
}

.status-badge {
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
  margin-left: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.status-badge:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.status-badge.queued {
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.8), rgba(191, 219, 254, 0.8));
  color: #1e40af;
  border: 1px solid rgba(96, 165, 250, 0.4);
}

.status-badge.running {
  background: linear-gradient(135deg, rgba(255, 237, 213, 0.8), rgba(254, 215, 170, 0.8));
  color: #9a3412;
  border: 1px solid rgba(251, 191, 36, 0.4);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.status-badge.succeeded {
  background: linear-gradient(135deg, rgba(220, 252, 231, 0.8), rgba(187, 247, 208, 0.8));
  color: #166534;
  border: 1px solid rgba(74, 222, 128, 0.4);
}

.status-badge.failed {
  background: linear-gradient(135deg, rgba(254, 226, 226, 0.8), rgba(252, 165, 165, 0.8));
  color: #991b1b;
  border: 1px solid rgba(248, 113, 113, 0.4);
}

.video-preview {
  margin-bottom: 20px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(163, 196, 188, 0.3);
  box-shadow: 0 4px 20px rgba(163, 196, 188, 0.15);
  transition: all 0.3s ease;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(163, 196, 188, 0.05));
}

.video-preview:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(163, 196, 188, 0.25);
  border-color: rgba(139, 115, 85, 0.4);
}

.video-preview video {
  width: 100%;
  height: auto;
  display: block;
  transition: all 0.3s ease;
}

.video-preview video:hover {
  transform: scale(1.02);
}

.error-message {
  background: rgba(254, 226, 226, 0.6);
  color: #991b1b;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.result-actions {
  text-align: center;
}

.clear-btn, .refresh-btn {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(163, 196, 188, 0.5);
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(5px);
  color: #8B7355;
  font-weight: 500;
}

.clear-btn:hover, .refresh-btn:hover {
  background: rgba(163, 196, 188, 0.1);
  transform: translateY(-1px);
}

.loading, .empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  animation: bounce 2s infinite;
  background: linear-gradient(135deg, #8B7355, #A3826B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

@media (max-width: 768px) {
  .ai-video-page {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #A3C4BC;
  }
  
  .sidebar.collapsed {
    width: 100%;
  }
  
  .main-content {
    width: 100%;
  }
  
  .settings-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .message {
    max-width: 100%;
  }
  
  .welcome-features {
    grid-template-columns: 1fr;
  }
}

/* 新增样式 */
.search-box {
  margin-bottom: 16px;
}

/* 加载动画 */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 页面加载动画 */
.video-page {
  animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

.search-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #A3C4BC;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #374151;
  font-size: 14px;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #8B7355;
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
  transform: translateY(-1px);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.history-actions {
  display: flex;
  gap: 8px;
}

.sort-button, .favorite-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #8B7355;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.sort-button:hover, .favorite-button:hover {
  background: rgba(139, 115, 85, 0.1);
}

.favorite-button.favorited {
  color: #fbbf24;
}

.history-item-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.history-item:hover .history-item-actions {
  opacity: 1;
}

.history-item.favorite .history-title-text {
  color: #fbbf24;
}

.no-tasks {
  text-align: center;
  padding: 20px;
  color: #9ca3af;
  font-style: italic;
}

.prompt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.template-button {
  background: rgba(139, 115, 85, 0.1);
  border: 1px solid rgba(139, 115, 85, 0.3);
  color: #8B7355;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.template-button:hover {
  background: rgba(139, 115, 85, 0.2);
}

.scroll-to-bottom-button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(139, 115, 85, 0.8);
  color: white;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  z-index: 10;
}

.scroll-to-bottom-button:hover {
  background: rgba(139, 115, 85, 1);
  transform: translateY(-2px);
}

.favorite-star {
  color: #fbbf24;
  margin-right: 4px;
}

.history-status {
  margin-top: 4px;
}

.history-status .status-badge {
  font-size: 10px;
  padding: 2px 6px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .ai-video-page {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #A3C4BC;
  }
  
  .sidebar.collapsed {
    width: 100%;
  }
  
  .main-content {
    width: 100%;
  }
  
  .settings-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .message {
    max-width: 100%;
  }
  
  .welcome-features {
    grid-template-columns: 1fr;
  }
}
</style>
